<template>
    <teleport to="body">
        <div v-if="visible"
             class="outer-box"
             :style="{
                top: `${y}px`,
                left: `${x}px`,
            }"
        >
            <slot></slot>
        </div>
    </teleport>
</template>

<script setup>
import {computed} from "vue";
// export default {
//     name: "popUpBox"
// }
const props = defineProps({
    text: {
        type: String,
        default: '没有数值'
    },
    visible: {
        type: Boolean,
        default: false
    },
    x: {
        type: Number,
        default: 0
    },
    y: {
        type: Number,
        default: 0
    }

})
const text = computed(() => props.text);
const visible = computed(() => props.visible);
const x = computed(() => props.x);
const y = computed(() => props.y);
</script>

<style scoped>
.outer-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 5px;
    position: absolute;
    background: rgb(91, 106, 241);
    border: 2px solid white;
    color: #ffffff;
    height: 60px;
    transform:translateX(-50%) translateY(-70%);
}
.outer-box::after{
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    bottom:-9px;
    left:50%;
    background: rgb(91, 106, 241);
    border-bottom: 2px solid white;
    border-right: 2px solid white;
}
</style>
